<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    
    @keyframes circ{
        
        from{
            transform:rotateY( 0deg ) rotateZ( 0deg );
        }
        to{
            transform:rotateY( 359deg ) rotateZ( 359deg );
        }
        
    }
    
    #origin{width:25px;height:25px;border:1px solid #666;border-radius:50%;margin:230px auto 0 auto;}
    .jb{transition:all 1s ease 0s;/*transform:scale( 0.1 );*/}
    .circ{animation:circ 3s infinite linear 0s;}
    </style>
    <script src="http://static.yjsvip.com/static/js/jquery-3.0.0.min.js"></script>
</head>
<body>
    <div><div id="origin"></div></div>
    <script>//   requestAnimationFrame
        var jb = {
            target: document.getElementById('origin'),
            width: 25,
            height: 25,
            oimgs: [],
            img: function(){
                var oimg   = null,
                    frag   = document.createDocumentFragment(),
                    origin = this.target;
                    
                for(var i=0;i<20;i++){
                    oimg = document.createElement('img');
                    oimg.className = 'jb circ';
                    oimg.style = 'width:'+this.width+'px;height:'+this.height+'px;position:absolute;left:' + origin.offsetLeft + 'px;top:' + origin.offsetTop + 'px';
                    oimg.src = './static/images/jb.png';
                    frag.appendChild( oimg );
                    this.oimgs.push( oimg );
                }
                document.body.appendChild( frag );
            },
            init: function(){
                this.img();
            },
            random: function( s, e ){
                var i;
                if( e < s ){
                    i = s;s = e;e = i;
                }
                return Math.random() * ( e-s ) + s;
            },
            getView: function(){
                
            },
            down: function(){
                
                var origin = this.target;
                var _this = this;
                _this.oimgs.forEach(function(item, i){
                    //item.style.left = (origin.offsetLeft > item.offsetLeft ? item.offsetLeft-_this.random(50,150) : item.offsetLeft+_this.random(50,150) ) + 'px';
                    //item.style.top = 500+'px';
                    item.className = 'circ';
                    item.tid = setInterval(function(){
                        //item.style.left = origin.offsetLeft > item.offsetLeft ? item.offsetLeft-_this.random(1,5)+'px' : item.offsetLeft+_this.random(1,5)+'px';
                        //item.style.top = item.offsetTop+1+'px';
                        
                        item.style.left = item.offsetLeft + item.speedX + 'px';
                        item.style.top = item.offsetTop + item.speedY + 'px';
                        item.speedY += 1;
                        
                        if( item.style.left ){
                            
                        }
                        
                        
                    }, 10);
                
                })
                
            },
            run: function(){
                
                var _this = this,
                origin    = _this.target;
                this.init();
                
                function run(){
                    
                    _this.oimgs.forEach(function(item, i){
                        item.style.animationDuration = _this.random(500, 1500)+'ms';
                        item.style.left = _this.random(origin.offsetLeft - 100, origin.offsetLeft + 100) + 'px';
                        item.style.top = _this.random(5, 80)+'px';
                        
                        item.speedX = _this.random( -10, 10 );
                        item.speedY = _this.random( -10, 10 );
                    })
                    
                    //setTimeout(function(){_this.down.call(_this)}, 1080);
                    
                }
                run()
                //console.log( this.oimgs )
                
            }
        }
        jb.run();
    </script>
</body>
</html>